<template>
  <div class="layout">
    <router-view></router-view>

    <van-tabbar v-model="active" active-color="#fa711d">
      <van-tabbar-item to="/layout/article" icon="fire-o">面经</van-tabbar-item>
      <van-tabbar-item to="/layout/collect" icon="star-o">收藏</van-tabbar-item>
      <van-tabbar-item to="/layout/like" icon="like-o">点赞</van-tabbar-item>
      <van-tabbar-item to="/layout/user" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'TtLayout',
  data () {
    return {
      active: 0
    }
  },
  methods: {
   
  },
  watch: {
    $route(to) {
      // 根据路由路径更新 active 的值
      if (to.path === '/layout/article') {
        this.active = 0;
      } else if (to.path === '/layout/collect') {
        this.active = 1;
      } else if (to.path === '/layout/like') {
        this.active = 2;
      } else if (to.path === '/layout/user') {
        this.active = 3;
      }
    }
  },
  mounted() {
    // 初始化时根据当前路由设置 active
    this.$route.path === '/layout/article' && (this.active = 0);
    this.$route.path === '/layout/collect' && (this.active = 1);
    this.$route.path === '/layout/like' && (this.active = 2);
    this.$route.path === '/layout/user' && (this.active = 3);
  }
}
</script>

<style lang="less" scoped>
  .layout {
    height: 100vh; /* 使布局占满整个视口高度 */
  }
</style>